<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<canvas id="canvas1">
	</canvas>
	<script type="text/javascript">
	
		var canvas = document.getElementById("canvas1");
		canvas.setAttribute('width', '400');
		canvas.setAttribute('height', '400');
		var canvasContext = canvas.getContext("2d");

		function drawCubeWithLines() {
			var cube_size = 200;
			var initial_pointX = 50;
			var initial_pointY = 100;
			
			canvasContext.strokeStyle = "hsl(120,100%,50%)";
			canvasContext.moveTo(initial_pointX, initial_pointY);

			canvasContext.lineTo(initial_pointX + Math.sin(-(3 * Math.PI) / 2) * cube_size, initial_pointY + Math.cos(-Math.PI / 2) * cube_size);
			canvasContext.lineTo(initial_pointX + Math.sin(Math.PI / 2) * cube_size, initial_pointY + Math.cos(0) * cube_size);
			canvasContext.lineTo(initial_pointX + Math.sin(0) * cube_size, initial_pointY + Math.cos(0) * cube_size);
			canvasContext.lineTo(initial_pointX + Math.sin(0) * cube_size, initial_pointY + Math.cos(Math.PI / 2) * cube_size);
			canvasContext.lineTo(initial_pointX + 40, initial_pointY - 20);
			canvasContext.lineTo(initial_pointX + 40 + cube_size, initial_pointY - 20);
			canvasContext.lineTo(initial_pointX + 40 + cube_size, initial_pointY - 20 + cube_size);
			canvasContext.lineTo(initial_pointX + cube_size, initial_pointY + cube_size);
			canvasContext.moveTo(initial_pointX + cube_size, initial_pointY);
			canvasContext.lineTo(initial_pointX + 40 + cube_size, initial_pointY - 20);
			canvasContext.stroke();
		}

		function drawSquares(){
			var squareSize=50;
			canvasContext.fillStyle='rgb(255,255,255)';
			canvasContext.clearRect(0,0,400, 400);
			var init_x,init_y,red,green,blue, color;
			var i;
			for(i=0;i<20;i++){
				init_x=Math.round(Math.random()*400), init_y=Math.round(Math.random()*255);
				red=Math.round(Math.random()*255);
				green=Math.round(Math.random()*255);
				blue=Math.round(Math.random()*255);
				color='rgb(' + red + ',' + green + ',' + blue + ')';
				canvasContext.fillStyle=color;
				canvasContext.fillRect(init_x,init_y,squareSize,squareSize);
			}
		}

		function drawCircles(){
			var radius=20;
			canvasContext.fillStyle='rgb(255,255,255)';
			canvasContext.clearRect(0,0,400, 400);
			var init_x,init_y,red,green,blue, color;
			var i;
			for(i=0;i<20;i++){
				canvasContext.beginPath();
				init_x=Math.round(Math.random()*400), init_y=Math.round(Math.random()*255);
				red=Math.round(Math.random()*255);
				green=Math.round(Math.random()*255);
				blue=Math.round(Math.random()*255);
				color='rgb(' + red + ',' + green + ',' + blue + ')';
				canvasContext.fillStyle=color;
				canvasContext.arc(init_x,init_y,radius,Math.PI*2,false);
				canvasContext.fill();
				//canvasContext.stroke();
			}
		}

		//Se utiliza RequestAnimationFrame para animaciones inteligentes
		window.requestAnimFrame = (function() {
			return	window.requestAnimationFrame ||
					window.webkitRequestAnimationFrame ||
					window.mozRequestAnimationFrame ||
					window.oRequestAnimationFrame ||
					window.msRequestAnimationFrame ||
					function( callback, element) {
						window.setTimeout(callback, 1000 / 60);
					};
		})();
		function animationOnCircles(){
			function circle() {
				this.x = Math.random() * 400;
				this.y = Math.random() * 400;
				this.speedx = (Math.random() * 5) + 1;
				this.speedy = (Math.random() * 5) + 1;
				this.radius = Math.random() * 30;
				this.r = Math.round(Math.random() * 255);
				this.g = Math.round(Math.random() * 255);
				this.b = Math.round(Math.random() * 255);

			}
			var circles_number = 5;
			var circles = [];
			for(var i = 0; i < circles_number; i++) {
				circles.push(new circle());
			}

			function draw(time) {
				console.log(time);
				canvasContext.beginPath();
				canvasContext.fillStyle = '#000000';
				canvasContext.fillRect(0, 0, 400, 400);
				canvasContext.globalCompositeOperation = "source-over";

				for(var i = 0; i < circles_number; i++) {
					canvasContext.beginPath();
					var cir = circles[i];
					canvasContext.fillStyle = 'rgb(' + cir.r + ',' + cir.g + ',' + cir.b + ')';

					cir.x = cir.x + cir.speedx;
					cir.y = cir.y + cir.speedy;


					if((cir.x + cir.radius) >= 400 || (cir.x - cir.radius) <= 0) {
						cir.speedx = -cir.speedx;
					}
					if((cir.y + cir.radius) >= 400 || (cir.y - cir.radius) <= 0) {
						cir.speedy = -cir.speedy;
					}
					canvasContext.arc(cir.x, cir.y, cir.radius, Math.PI * 2, false);
					canvasContext.fill();
				}
			}
			function render(miliseconds) {
				requestAnimFrame(render);
				draw(miliseconds);
			}
			render();
		}

		function animateSpriteSheet(){

			var SPRITESHEET=new Image();
			SPRITESHEET.onload=function(){
				render();
			}
			SPRITESHEET.src='sonic.png';
			var sprite_height=40;
			var sprite_width=35;
			var counter=0;
			var last_time=Date.now();
			function updateSprite(miliseconds){
				if(last_time+60<miliseconds){
					counter++;
					counter=counter%12;
					canvasContext.drawImage(SPRITESHEET, counter*sprite_width, 0, sprite_width, sprite_height, 0, 0, sprite_width, sprite_height);
					last_time=miliseconds;
				}
					
			}
			function render(miliseconds){
				updateSprite(miliseconds);
				requestAnimFrame(render);
			}
			
			
		}
		drawCubeWithLines();
		//drawCircles();
		//animateSpriteSheet();
		//animationOnCircles();

	</script>
</body>
</html>